<template>
  <div>
    <h1>我是子组件</h1>
    <h1>{{price}}</h1>
    <h1>{{myname}}</h1>
    <h1>{{cc}}</h1>
    <button @click="toSend">子传父</button>
  </div>
</template>

<script >
import {ref,getCurrentInstance,onMounted} from 'vue'
import $mitt from '../../utils/mitt.js'
  export default {
    emits:["sendhob"],//Vue3中新增emits这一选项使得子组件触发的事件更加清晰，更加方便维护
    props:["price","myname"],
    setup(props,ctx){
      let cc=ref('1111')
      let {appContext}=getCurrentInstance();
      // 全局的使用方法
      appContext.config.globalProperties.$mitt.on("sendguan",(val)=>{
        console.log(val,"888888888888*******")
      })
      // 随时导入的用法
      onMounted(()=>{
          $mitt.on("sendzhang",(val)=>{
            console.log(val,"66666666*******")
            cc.value=val;
         })
      })
    


      // props --父传子的数据 在setup中使用
      console.log(props.myname,"#######") 
      console.log(props.price,"#######")
      let myhobby=ref("游泳")
      // 子传父
      let toSend=()=>{
          console.log(ctx,"--88888888")
          // ctx.attrs  接收 除props以外的父传子的属性
          // ctx.emit  用来子传父的
          // ctx.slots() 获取所有插槽
          // ctx.expose() 用来获取其他组件的暴漏的数据
          ctx.emit("sendhob",myhobby.value)

      }
      return {
        toSend,
        cc
      } 
    }
  }
</script>
